<style lang="less">
@import "../../styles/common.less";
@import "./realtime.less";
textarea {
  font-size: 12px !important;
}
</style>
<style scoped>
.access-current-user-con p b {
  color: #444;
}
.access-current-user-con p {
  line-height: 2.2;
  padding: 0;
}
</style>


<template>
<div>
   <div style="height: 32px; margin-bottom: 20px;">
        <div style="float: right">
          <div style="margin-right: 10px; display: inline-block;">
            <Select v-model="selectedFloor" style="width:200px" placeholder="请选择楼层" @on-change="floorChanged">
              <Option v-for="item in floorList" :value="item.label" :key="item.value">{{ item.label }}</Option>
            </Select>
          </div>
          <Button type="primary" style=" display: inline-block;" @click="addEnclosure">新增</Button>
        </div>
      </div>
      <Table border :columns="areaColumn" :data="enclosureData"></Table>
      <!--<indoorMap id="indoorMap" style="display:none; width: 100%; height: 540px" :allowChangeBuilding="false"-->
      <!--:allowFilterDevice="false" :roomHoverSilence="true" ref="indoorMap" @initiated="cloneMap"></indoorMap>-->
      <Modal
        v-model="showMap"
        :title="newEnclosureMode?'新增电子围栏':'管理电子围栏'"
        :styles="{width: '90%', top: '20px', position: 'relative'}" :closable="false"
        @on-ok="saveEnclosure" @on-cancel="cancelEnclosure"
      >
        <indoorMap id="indoorMap" style="width: 100%; height: 540px; position: relative;" :auto="false"
                   :allowChangeBuilding="false"
                   :allowFilterDevice="false" :roomHoverSilence="true" ref="indoorMap"
                   @pathPointAdded="pathPointAdded" @initiated="mapInitiated" @changeFloor="mapFloorChanged">
        </indoorMap>
        <div style="position: absolute; bottom: 86px; right: 26px;">注意：右键可取消最后添加的路径点</div>
        <div style="position: absolute; width: 100%; font-size: 14px; color: #222; top: 77px; text-align: center;"
            >妇女医院{{currentFloor.floorName}}层
        </div>
        <Card style="width: 30%; position: absolute; top: 136px; right: 16px;">
          <Form :model="formItem" :label-width="80" :rules="ruleValidate" ref="newForm">
            <Form-item label="围栏名称" prop="name">
              <Input v-model="formItem.name" placeholder="请输入"></Input>
            </Form-item>
            <Form-item label="围栏描述" prop="desc">
              <Input v-model="formItem.desc" type="textarea" style="font-size: 12px;" :autosize="{minRows: 2,maxRows: 5}"
                     placeholder="请输入..."></Input>
            </Form-item>
          </Form>
          <div style="text-align: right"><Button type="warning" @click="editPath" v-show="editEnclosureMode && !editPathMode">重设</Button>
          <Button @click="cancelPath" v-show="editEnclosureMode&&editPathMode">取消</Button>
          </div>
        </Card>
      </Modal>
      </div>
</template>

<script>
import Cookies from "js-cookie";
require("../../assets/Indoor.css");
import Indoor from "../../assets/Indoor.js";
import indoorMap from "../my-components/indoorMap.vue";
window.NGR = Indoor;
import { areaColumn } from "./data/area";

export default {
  name: "access_index",
  components: {
    indoorMap
  },
  data() {
    return {
      formItem: {
        name: "",
        desc: ""
      },
      ruleValidate: {
        name: [{ required: true, message: "围栏名称不能为空", trigger: "blur" }]
      },
      editPathMode: false,
      pathEdited: false,
      inLoading: true,
      firstLoad: true,
      currentPage: {
        name: "电子围栏管理",
        path: "waste-enclosure-manage",
        module: "Waste"
      },
      selectedFloor: "全部楼层",
      floorList: [
        { label: "全部楼层", value: 0 },
        { label: "F1", value: 1 },
        { label: "F2", value: 2 },
        { label: "F3", value: 3 },
        { label: "F4", value: 4 },
        { label: "F5", value: 5 },
        { label: "F6", value: 6 }
      ],
      currentFloor: "F1",
      pathPoints: [],
      areaColumn,
      showMap: false,
      newEnclosureMode: false,
      editEnclosureMode: false,
      enclosureIndex: 0,
      enclosurePath: [
        [432712, 108822.9],
        [432711.35, 108822.35],
        [432712.03, 108821.8],
        [432712.18, 108822],
        [432712.5, 108821.7],
        [432712.8, 108822.25]
      ],
      originalEnclosureData: [
        {
          name: "测试围栏1",
          floor: "F1",
          desc: "用于测试围栏管理功能",
          update_time: "2017-08-01 10:10:00"
        },
        {
          name: "测试围栏2",
          floor: "F2",
          desc: "用于测试围栏管理功能",
          update_time: "2017-08-01 10:10:00"
        },
        {
          name: "测试围栏3",
          floor: "F3",
          desc: "用于测试围栏管理功能",
          update_time: "2017-08-01 10:10:00"
        },
        {
          name: "测试围栏4",
          floor: "F4",
          desc: "用于测试围栏管理功能",
          update_time: "2017-08-01 10:10:00"
        },
        {
          name: "测试围栏5",
          floor: "F5",
          desc: "用于测试围栏管理功能",
          update_time: "2017-08-01 10:10:00"
        },
        {
          name: "测试围栏6",
          floor: "F6",
          desc: "用于测试围栏管理功能",
          update_time: "2017-08-01 10:10:00"
        }
      ],
      enclosureData: []
    };
  },
  watch: {
    newEnclosureMode() {
      this.showMap = this.newEnclosureMode || this.editEnclosureMode;
    },
    editEnclosureMode() {
      this.showMap = this.newEnclosureMode || this.editEnclosureMode;
    }
  },
  methods: {
    addEnclosure() {
      this.newEnclosureMode = true;
      if (this.firstLoad) {
        this.$refs.indoorMap.initMap();
      }
    },
    saveEnclosure() {
      if (this.newEnclosureMode) {
        this.$refs.newForm.validate(valid => {
          if (valid && this.pathPoints.length > 2) {
            this.$Notice.success({
              title: "新增电子围栏成功"
            });
            this.pathPoints = [];
            this.newEnclosureMode = false;
            this.$refs.indoorMap.stopEditingPath();
          } else if (this.pathPoints.length < 3) {
            this.$nextTick(() => {
              this.showMap = true;
              this.newEnclosureMode = true;
            });
            this.$Notice.error({
              title: "您需要设置至少三个点组成一个电子围栏"
            });
          } else {
            this.$nextTick(() => {
              this.showMap = true;
              this.newEnclosureMode = true;
            });
            this.$Notice.error({
              title: "请输入电子围栏名称"
            });
          }
        });
      } else if (this.editEnclosureMode) {
        this.$refs.newForm.validate(valid => {
          if (valid && (this.pathPoints.length > 2 || !this.pathEdited)) {
            this.$Notice.success({
              title: "修改电子围栏成功"
            });
            this.pathPoints = [];
            this.editEnclosureMode = false;
            this.$refs.indoorMap.stopEditingPath();
            this.$refs.indoorMap.removeLimitPolygon();
            this.editPathMode = false;
          } else if (this.pathPoints.length < 3) {
            this.$nextTick(() => {
              this.showMap = true;
              this.editEnclosureMode = true;
            });
            this.$Notice.error({
              title: "您需要设置至少三个点组成一个电子围栏"
            });
          } else {
            this.$nextTick(() => {
              this.showMap = true;
              this.editEnclosureMode = true;
            });
            this.$Notice.error({
              title: "请输入电子围栏名称"
            });
            this.editPathMode = false;
          }
        });
      }
    },
    cancelEnclosure() {
      if (this.newEnclosureMode) {
        this.$refs.indoorMap.stopEditingPath();
        this.$refs.indoorMap.removeLimitPolygon();
        this.pathPoints = [];
        this.newEnclosureMode = false;
        this.editPathMode = false;
      } else {
        this.$refs.indoorMap.stopEditingPath();
        this.$refs.indoorMap.removeLimitPolygon();
        this.pathPoints = [];
        this.editEnclosureMode = false;
        this.editPathMode = false;
      }
    },
    mapInitiated() {
      if (this.newEnclosureMode) {
        this.editPathMode = true;
        this.$refs.indoorMap.editingPath();
      }
      // 首次加载在图进来之后再加载路径
      if (this.editEnclosureMode && this.firstLoad) {
        this.$refs.indoorMap.loadLimitPolygon(this.enclosurePath);
      }
      this.firstLoad = false;
    },
    removeEnclosure(index) {
      this.$Modal.confirm({
        title: "确认删除电子围栏",
        content: `围栏名: ${this.enclosureData[index].name}`,
        onOk: () => {
          this.enclosureData.splice(index, 1);
        }
      });
    },
    pathPointAdded(value) {
      console.log(value);
      this.pathPoints = value;
    },
    jump(page, param) {
      this.$router.push({ name: page, params: { id: param } });
    },
    mapFloorChanged(floor) {
      this.currentFloor = floor;
    },
    floorChanged(value) {
      this.enclosureData =
        value === "全部楼层"
          ? this.originalEnclosureData
          : this.originalEnclosureData.filter(item => {
              return item.floor === value;
            });
    },
    editPath() {
      this.editPathMode = true;
      this.$refs.indoorMap.editingPath();
      this.pathEdited = true;
    },
    cancelPath() {
      this.editPathMode = false;
      this.$refs.indoorMap.stopEditingPath(false);
      this.pathEdited = false;
      this.$refs.indoorMap.loadLimitPolygon(this.enclosurePath);
    },
    editEnclosure(index) {
      this.enclosureIndex = index;
      this.newEnclosureMode = false;
      this.editEnclosureMode = true;
      this.formItem.name = this.enclosureData[index].name;
      this.formItem.desc = this.enclosureData[index].desc;
      if (this.firstLoad) {
        // 首次点击查看加载地图
        this.$refs.indoorMap.initMap();
      } else {
        this.$refs.indoorMap.loadLimitPolygon(this.enclosurePath);
      }
    }
  },
  async mounted() {
    this.enclosureData = this.originalEnclosureData;
    window.editEnclosure = this.editEnclosure;
    window.removeEnclosure = this.removeEnclosure;
  }
};
</script>

